<template>
  <div class="w-full flex-grow mr-[20px]">
    <CustomTitle title="基本信息" class="mb-[20px]"> </CustomTitle>
    <div class="w-full h-[300px] bg-[#1B1B1B] mt-[10px] rounded-[10px] flex items-center">
      <div class="w-[45%] h-full flex justify-center items-center p-[80px]">
        <!-- <a-progress strokeColor="#53DCFF" type="dashboard" :percent="75" :size="200">
          <template #format="percent">
            <div style="color: #e6e6e6">
              <div class="text-[30px]">{{ percent }}%</div>
              <div class="text-[15px]">平均利用率</div>
            </div>
          </template>
        </a-progress> -->
        <div class=" ">
          <img v-if="data.type.indexOf('GC') > -1" src="@/assets/images/device_detail.png" class="w-[226px] h-[192px] object-contain" />
          <img v-else-if="data.type.indexOf('露点仪') > -1" src="@/assets/images/ludian.png" class="w-[212px] h-[197px] object-contain" />
          <img v-if="data.type.indexOf('预处理') > -1" src="@/assets/images/pre_handle_.png" class="w-[139px] h-[260px] object-contain" />
        </div>
      </div>
      <div class="w-[55%] h-full pr-[40px] py-[40px]">
        <div
          class="w-[100px] text-[16px] h-[40px] text-white rounded-[10px] flex justify-center items-center"
          :class="{
            'bg-[#53DCFF]': data.status === '运行中',
            'bg-[#FF9F00]': data.status === '离线',
            'bg-[#F83253]': data.status === '故障',
          }"
        >
          <span>{{ data.status }}</span>
        </div>
        <div class="flex justify-between items-center pt-[20px]">
          <div class="text-[16px] text-[#E6E6E6]">设备名称</div>
          <div class="text-[16px] text-[#E6E6E6]">{{ data.name }}</div>
        </div>
        <div class="flex justify-between items-center pt-[20px]">
          <div class="text-[16px] text-[#E6E6E6]">设备类型</div>
          <div class="text-[16px] text-[#E6E6E6]">{{ data.type }}</div>
        </div>
        <div class="flex justify-between items-center pt-[20px]">
          <div class="text-[16px] text-[#E6E6E6]">设备所属</div>
          <div class="text-[16px] text-[#E6E6E6]">{{ data.group_second_name }}</div>
        </div>
        <div class="flex justify-between items-center pt-[20px]">
          <div class="text-[16px] text-[#E6E6E6]">远程控制</div>
          <a v-if="data.remote_control" :href="data.remote_control" target="blank">
            <img src="@/assets/images/remote.png" class="w-[32px] h-[28px] cursor-pointer" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps<{ data: any }>();
</script>
<style lang="less" scoped></style>
